.keyboard-container 
    z-index 15
    height 100%
    width 100%
    position fixed
    -webkit-user-select none
    opacity 1

    .overlay-content 
        height 100%
        width 100%
        position absolute
        background $BgColor1
        opacity 0.95
        z-index -1

    h1 
        font-family $AlternateFont
        font-weight: bold;
        font-size 20px

        & + hr 
            margin-top: 10px;


    .content 
        height: 100%
        margin 0 auto
        margin-top 80px
        width 80%
        color $Text1
        font-family $AlternateFont
        font-size 15px

        .text-about 
            margin-top 55px
            line-height 22px
            margin-bottom 20px
            position absolute
            width 60%

    .keyboard-outer
        scrollable()
        height: calc(100% - 200px);

    .fix-float
        float left
        position relative
        left: 50%
    
    .keyboard-table 
        float: left;
        position relative
        left: -50%
        &.last 
            margin-left: 30px;


        tbody:first-child tr:first-child th 
            padding-top: 0;


        th 
            padding-top: 25px;
            font-size: 16px;
            font-family $AlternateFont
            font-weight bold
            line-height: 1.5;
            color: darken($Text1, 10%);
            text-align: left;


        td 
            padding-top: 3px;
            padding-bottom: 3px;
            line-height: 22px;


        tr td:first-child 
            padding-top: 1px;
            padding-right: 10px;
            text-align: right;
            white-space: nowrap;


        td span.key 
            margin-left: 7px;
            margin-right: 7px;

            &:first-child 
                margin-left: 0;
    

            &:last-child 
                margin-right: 0;
    


    .key 
        display: inline-block
        color: lighten(#000, 10%)
        font: bold 9pt arial
        text-decoration: none
        text-align: center
        width: 23px
        height: 21px
        background: #eff0f2
        border-radius: 4px
        border-top: 1px solid #f5f5f5
        box-shadow: 
            inset 0 0 25px #e8e8e8,
            0 1px 0 #c3c3c3,
            0 2px 0 #c9c9c9,
            0 2px 3px #333
        text-shadow: 0px 1px 0px #f5f5f5
        padding: 3px 0 0
        text-transform: uppercase
            
        &.tab 
            text-align: left;
            padding: 23px 0 0 10px;
            font-size: 7.5pt;
            text-transform: lowercase;

        
        &.esc 
            padding: 6px 2px 0 0;
            font-size: 7.5pt;
            text-transform: lowercase;


        &.delete,
        &.tab 
            width: 36px;


        &.caps,
        &.enter 
            width: 54px;


        &.shiftleft,
        &.shiftright 
            width: 56px;


        &.fn,
        &.control,
        &.option,
        &.command,
        &.spacebar 
            height: 24px;


        &.control 
            width: 38px;

        
        &.option 
            width: 23px;

        
        &.command 
            width: 38px;

        
        &.spacebar 
            width: 113px;


        &.down 
            height: 11px;


        &.up, 
        &.leftarrow, 
        &.rightarrow 
            height: 12px;


        &.leftarrow, 
        &.rightarrow 
            padding: 5px 5px 5px;


        &.up 
            padding: 5px 5px 1px; 
            border-bottom-right-radius: 0px; 
            border-bottom-left-radius: 0px;


        &.down 
            padding: 0 5px 5px; 
            border-top-left-radius: 0px; 
            border-top-right-radius: 0px;


        &.arrow 
            font-size: 14px;